//1. 引入Vue
import Vue from "vue";

//2. 引入VueRouter
import VueRouter from "vue-router";

//引入路由组件
import Login from "../pages/Login";
import Home from "../pages/Home";
import News from "../pages/Home/News";
import Music from "../pages/Home/Music";
import Games from "../pages/Home/Games";

//3. 让Vue使用VueRouter这个插件
Vue.use(VueRouter);

//4.创建路由器对象
export default new VueRouter({
  //在实例化路由器对象的配置中,书写路由表配置
  routes: [
    { path: "/login", component: Login, name: "login" },
    {
      path: "/home",
      component: Home,

      children: [
        {
          path: "music/:id/:time?",
          component: Music,
          name: "music",
          //如果在路由的配置中书写了props配置项,并且值为true,则代表把当前路由表接受的params动态参数通过props的形式传递给了该组件
          props: true,
        },
        { path: "news", component: News, name: "news" },
        {
          path: "games",
          component: Games,
          name: "games",
          //在路由表中如果props配置是一个对象,则会把对象内的属性一个个通过props传递给当前组件
          /* props: {
            a: 1,
            b: 2,
            c: 3,
          }, */

          //props第三种写法,props可以是一个函数,函数的参数是当前路由的$route 路由对象
          props: (route) => {
            // console.log(route, "aaaa");
            return route.query;
          },
        },
        { path: "", redirect: "/home/news" },
      ],
    },
    { path: "/", redirect: "/home" },  
  ],
});
